/**
 * Created with JetBrains PhpStorm.
 * User: xuheng
 * Date: 12-12-19
 * Time: 下午4:55
 * To change this template use File | Settings | File Templates.
 */
(function () {
    var title = $G('J_title'),
        titleCol = $G('J_titleCol'),
        caption = $G('J_caption'),
        sorttable = $G('J_sorttable'),
        autoSizeContent = $G('J_autoSizeContent'),
        autoSizePage = $G('J_autoSizePage'),
        tone = $G('J_tone'),
        me,
        preview = $G('J_preview');

    var editTable = function () {
        me = this;
        me.init();
    };
    editTable.prototype = {
        init: function () {
            var colorPiker = new UE.ui.ColorPicker({
                    editor: editor,
                }),
                colorPop = new UE.ui.Popup({
                    editor: editor,
                    content: colorPiker,
                });

            title.checked = editor.queryCommandState('inserttitle') == -1;
            titleCol.checked = editor.queryCommandState('inserttitlecol') == -1;
            caption.checked = editor.queryCommandState('insertcaption') == -1;
            sorttable.checked = editor.queryCommandState('enablesort') == 1;

            var enablesortState = editor.queryCommandState('enablesort'),
                disablesortState = editor.queryCommandState('disablesort');

            sorttable.checked = !!(enablesortState < 0 && disablesortState >= 0);
            sorttable.disabled = !!(enablesortState < 0 && disablesortState < 0);
            sorttable.title = enablesortState < 0 && disablesortState < 0 ? lang.errorMsg : '';

            me.createTable(title.checked, titleCol.checked, caption.checked);
            me.setAutoSize();
            me.setColor(me.getColor());

            domUtils.on(title, 'click', me.titleHanler);
            domUtils.on(titleCol, 'click', me.titleColHanler);
            domUtils.on(caption, 'click', me.captionHanler);
            domUtils.on(sorttable, 'click', me.sorttableHanler);
            domUtils.on(autoSizeContent, 'click', me.autoSizeContentHanler);
            domUtils.on(autoSizePage, 'click', me.autoSizePageHanler);

            domUtils.on(tone, 'click', function () {
                colorPop.showAnchor(tone);
            });
            domUtils.on(document, 'mousedown', function () {
                colorPop.hide();
            });
            colorPiker.addListener('pickcolor', function () {
                me.setColor(arguments[1]);
                colorPop.hide();
            });
            colorPiker.addListener('picknocolor', function () {
                me.setColor('');
                colorPop.hide();
            });
        },

        createTable: function (hasTitle, hasTitleCol, hasCaption) {
            var arr = [],
                sortSpan = '<span>^</span>';
            arr.push("<table id='J_example'>");
            if (hasCaption) {
                arr.push('<caption>' + lang.captionName + '</caption>');
            }
            if (hasTitle) {
                arr.push('<tr>');
                if (hasTitleCol) {
                    arr.push('<th>' + lang.titleName + '</th>');
                }
                for (var j = 0; j < 5; j++) {
                    arr.push('<th>' + lang.titleName + '</th>');
                }
                arr.push('</tr>');
            }
            for (var i = 0; i < 6; i++) {
                arr.push('<tr>');
                if (hasTitleCol) {
                    arr.push('<th>' + lang.titleName + '</th>');
                }
                for (var k = 0; k < 5; k++) {
                    arr.push('<td>' + lang.cellsName + '</td>');
                }
                arr.push('</tr>');
            }
            arr.push('</table>');
            preview.innerHTML = arr.join('');
            this.updateSortSpan();
        },
        titleHanler: function () {
            var example = $G('J_example'),
                frg = document.createDocumentFragment(),
                color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, 'td')[0], 'border-color'),
                colCount = example.rows[0].children.length;

            if (title.checked) {
                example.insertRow(0);
                for (var i = 0, node; i < colCount; i++) {
                    node = document.createElement('th');
                    node.innerHTML = lang.titleName;
                    frg.appendChild(node);
                }
                example.rows[0].appendChild(frg);
            } else {
                domUtils.remove(example.rows[0]);
            }
            me.setColor(color);
            me.updateSortSpan();
        },
        titleColHanler: function () {
            var example = $G('J_example'),
                color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, 'td')[0], 'border-color'),
                colArr = example.rows,
                colCount = colArr.length;

            if (titleCol.checked) {
                for (var i = 0, node; i < colCount; i++) {
                    node = document.createElement('th');
                    node.innerHTML = lang.titleName;
                    colArr[i].insertBefore(node, colArr[i].children[0]);
                }
            } else {
                for (var i = 0; i < colCount; i++) {
                    domUtils.remove(colArr[i].children[0]);
                }
            }
            me.setColor(color);
            me.updateSortSpan();
        },
        captionHanler: function () {
            var example = $G('J_example');
            if (caption.checked) {
                var row = document.createElement('caption');
                row.innerHTML = lang.captionName;
                example.insertBefore(row, example.firstChild);
            } else {
                domUtils.remove(domUtils.getElementsByTagName(example, 'caption')[0]);
            }
        },
        sorttableHanler: function () {
            me.updateSortSpan();
        },
        autoSizeContentHanler: function () {
            var example = $G('J_example');
            example.removeAttribute('width');
        },
        autoSizePageHanler: function () {
            var example = $G('J_example');
            var tds = example.getElementsByTagName(example, 'td');
            utils.each(tds, function (td) {
                td.removeAttribute('width');
            });
            example.setAttribute('width', '100%');
        },
        updateSortSpan: function () {
            var example = $G('J_example'),
                row = example.rows[0];

            var spans = domUtils.getElementsByTagName(example, 'span');
            utils.each(spans, function (span) {
                span.parentNode.removeChild(span);
            });
            if (sorttable.checked) {
                utils.each(row.cells, function (cell, i) {
                    var span = document.createElement('span');
                    span.innerHTML = '^';
                    cell.appendChild(span);
                });
            }
        },
        getColor: function () {
            var start = editor.selection.getStart(),
                color,
                cell = domUtils.findParentByTagName(start, ['td', 'th', 'caption'], true);
            color = cell && domUtils.getComputedStyle(cell, 'border-color');
            if (!color) color = '#DDDDDD';
            return color;
        },
        setColor: function (color) {
            var example = $G('J_example'),
                arr = domUtils
                    .getElementsByTagName(example, 'td')
                    .concat(
                        domUtils.getElementsByTagName(example, 'th'),
                        domUtils.getElementsByTagName(example, 'caption'),
                    );

            tone.value = color;
            utils.each(arr, function (node) {
                node.style.borderColor = color;
            });
        },
        setAutoSize: function () {
            var me = this;
            autoSizePage.checked = true;
            me.autoSizePageHanler();
        },
    };

    new editTable();

    dialog.onok = function () {
        editor.__hasEnterExecCommand = true;

        var checks = {
            title: 'inserttitle deletetitle',
            titleCol: 'inserttitlecol deletetitlecol',
            caption: 'insertcaption deletecaption',
            sorttable: 'enablesort disablesort',
        };
        editor.fireEvent('saveScene');
        for (var i in checks) {
            var cmds = checks[i].split(' '),
                input = $G('J_' + i);
            if (input['checked']) {
                editor.queryCommandState(cmds[0]) != -1 && editor.execCommand(cmds[0]);
            } else {
                editor.queryCommandState(cmds[1]) != -1 && editor.execCommand(cmds[1]);
            }
        }

        editor.execCommand('edittable', tone.value);
        autoSizeContent.checked ? editor.execCommand('adaptbytext') : '';
        autoSizePage.checked ? editor.execCommand('adaptbywindow') : '';
        editor.fireEvent('saveScene');

        editor.__hasEnterExecCommand = false;
    };
})();
